import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as counterActions from '../store/actions/counter.actions'

// 会将 mapStateToProps 映射到组件的 props 属性中
function Counter ({count, increment, decrement}) {
    return <div>
      <button onClick={() => increment(5)}>+</button>
      <span>{ count }</span>
      <button onClick={() => decrement(5)}>-</button>
    </div>
}

/**
 * 1. connect 方法会帮助我们订阅 store，当 store 中的状态发生更改时会帮助我们重新渲染组件
 * 2. connect 方法可以让我们获取 store 中的状态，将状态通过组件的 props 属性映射给组件
 * 3. connect 方法可以让我们获取 dispatch 方法
 */

const mapStateToProps = state => ({
   count: state.counter.count,
}) 

// 通过 connect 的第二个参数可以将 dispatch 方法映射到组件的 props 中
const mapDispatchToProps = dispatch => bindActionCreators(counterActions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Counter)